<template>
  <div class="container">
    <el-form :model="param" :inline="true">
      <el-row class="minWidth">
        <el-col :span="6">
          <el-form-item label="操作人">
            <el-input v-model="param.searchName" placeholder="请输入用户名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="操作人类型">
            <el-select v-model="param.opeType" placeholder="请选择操作人类型">
              <el-option v-for="item in opeTypeList" :key="item.val" :label="item.name" :value="item.val"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日志类型">
            <el-select v-model="param.logType" placeholder="请选择类型">
              <el-option v-for="item in typeList" :key="item.val" :label="item.name" :value="item.val"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="操作时间">
            <el-date-picker v-model="param.dateTime" value-format="yyyy-MM-dd" type="date" placeholder="请选择操作时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="btn-row">
        <el-form-item class="btn_box">
          <el-button type="primary" @click="getLogList()">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-row>

    </el-form>
    <el-table class="elTable" v-loading="tableLoading" ref="multipleTable" height="445" :data="tableData"
      tooltip-effect="dark" align="center">
      <el-table-column prop="name" label="用户名" width="130">
        <template slot-scope="scope">
          <el-tooltip placement="top" effect="dark">
            <p slot="content">{{scope.row.name}}</p>
            <div class="name-wrapper text-nobr">{{scope.row.name}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号码" width="120"></el-table-column>
      <el-table-column prop="optTypeText" label="操作人类型" width="120"></el-table-column>
      <el-table-column prop="typeText" label="日志类型" width="130"></el-table-column>
      <el-table-column prop="remark" label="日志说明">
        <template slot-scope="scope">
          <el-tooltip placement="top" effect="dark">
            <p slot="content">{{scope.row.remark}}</p>
            <div class="name-wrapper text-nobr">{{scope.row.remark}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间" width="120">
        <template slot-scope="scope">{{ scope.row.updateTime.slice(0,10) }}</template>
      </el-table-column>
      <el-table-column prop="opeIp" label="操作IP"></el-table-column>
    </el-table>
    <el-row class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :current-page="param.currentPage" :page-size="100"
        layout="prev, pager, next, jumper, sizes, total" :total="total"></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { operatorType, logType, logList } from '../../../api/content';
export default {
  name: '',
  data () {
    return {
      total: 0,
      param: {
        currentPage: 1,
        size: 10,
        searchName: '', // 用户名
        opeType: '', // 操作人类型
        logType: '', // 日志类型
        dateTime: '', // 操作时间
        // operateTime: '', // 操作时间
        // opeId: ''
      },
      opeTypeList: [
        // {
        //     id: 1,
        //     label: '个人'
        // },
        // {
        //     id: 2,
        //     label: '企业'
        // },
        // {
        //     id: 3,
        //     label: '管理员'
        // }
      ],
      typeList: [
        // {
        //     id: 1,
        //     label: '新增'
        // },
        // {
        //     id: 2,
        //     label: '删除'
        // },
        // {
        //     id: 3,
        //     label: '修改'
        // },
        // {
        //     id: 4,
        //     label: '查询'
        // },
        // {
        //     id: 5,
        //     label: '登录'
        // },
        // {
        //     id: 6,
        //     label: '注册'
        // },
        // {
        //     id: 7,
        //     label: '简历'
        // },
        // {
        //     id: 8,
        //     label: '投递'
        // },
        // {
        //     id: 9,
        //     label: '收藏'
        // },
        // {
        //     id: 10,
        //     label: '账户'
        // },
        // {
        //     id: 11,
        //     label: '职位'
        // },
        // {
        //     id: 12,
        //     label: '认证'
        // },
        // {
        //     id: 13,
        //     label: '招聘会'
        // },
        // {
        //     id: 14,
        //     label: '企业信息'
        // },
        // {
        //     id: 15,
        //     label: '审核'
        // },
        // {
        //     id: 16,
        //     label: '企业'
        // },
        // {
        //     id: 17,
        //     label: '内容'
        // },
        // {
        //     id: 18,
        //     label: '系统'
        // },
        // {
        //     id: 19,
        //     label: '操作日志'
        // }
      ],
      tableLoading: false,
      tableData: []
    };
  },
  created () {
    if (this.$route.query.opeType) {
      // 获取用户名
      this.param.searchName = this.$route.query.userName
      // 获取操作人类型
      this.param.opeType = Number(this.$route.query.opeType);

    }
    this.initData()


  },
  mounted () { },
  methods: {
    // 初始化加载数据
    initData () {
      this.getOperatorType();
      this.getLogType();
      this.getLogList();
    },
    // 获取操作人类型数据
    getOperatorType () {
      operatorType().then(res => {
        if (res.success) {
          this.opeTypeList = res.data;
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    // 获取日志类型数据
    getLogType () {
      logType().then(res => {
        if (res.success) {
          this.typeList = res.data;
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    // 获取日志列表
    getLogList () {
      // [{column: "searchName",value: 'zsrencai'},{column: "opeType",value: 3},{column: "logType",value: 3},{column: "dateTime",value: '2020-05-08'}]
      this.tableLoading = true;
      let condition = [];
      condition.push({ column: "searchName", value: this.param.searchName });
      condition.push({ column: 'opeType', value: this.param.opeType });
      condition.push({ column: 'logType', value: this.param.logType });
      condition.push({ column: 'dateTime', value: this.param.dateTime })
      let formData = new FormData();
      formData.append('page', this.param.currentPage);
      formData.append('size', this.param.size);
      formData.append('condition', JSON.stringify(condition));
      // let opeType = 0, logType = 0;
      logList(formData).then(res => {
        if (res.success) {
          this.tableLoading = false;
          this.tableData = res.data.records || [];
          this.total = res.data.total;
        } else {
          this.$message.error(`${res.msg}`)
        }
        this.tableLoading = false;
      })
    },
    // 重置
    reset () {
      this.param = {
        currentPage: 1,
        size: 10,
        searchName: '', // 用户名
        opeType: '', // 操作人类型
        logType: '', // 日志类型
        dateTime: '', // 操作时间
      };
      this.getLogList();
    },
    handleSizeChange (val) {
      this.param.size = val;
      this.getLogList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      this.param.currentPage = val;
      this.getLogList();
      console.log(`当前页: ${val}`);
    }
  },
};
</script>

<style scoped>
.container {
}
.minWidth {
    min-width: 910px;
}
.btn-row {
    text-align: right;
    padding-right: 15px;
}
.elTable {
    /* height: 445px; */
    /* overflow: auto; */
}
.elTable .el-table--mini,
.el-table--small,
.el-table__expand-icon {
    font-size: 14px;
}
.elTable /deep/.el-table__empty-block {
    width: 99.5% !important;
    min-height: 396px !important;
}
.elTable /deep/.el-table__empty-text {
    font-size: 18px;
}
.el-table /deep/ td,
.el-table /deep/ th {
    text-align: center;
}
.name-wrapper {
    cursor: pointer;
}

.page {
    height: 60px;
    text-align: center;
    padding-top: 14px;
}
.elTable /deep/ .el-table__body-wrapper {
    width: 99.7%;
    height: 400px;
    /* border:1px solid red; */
}
</style>